<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <link rel="stylesheet" href="/stylesheets/style.css" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= username %></p>
    <div class="form-group">
      <label for="username"></label>
      <input
        type="text"
        class="form-control"
        name="username"
        id="username"
        aria-describedby="usernamehelp"
        placeholder="<%= username %>"
      />
      <small id="usernamehelp" class="form-text text-muted">请输入用户名</small>
      <label for="password"></label>
      <input
        type="password"
        class="form-control"
        name="password"
        id="password"
        aria-describedby="passwordhelp"
        placeholder=""
      />
      <small id="passwordhelp" class="form-text text-muted">请输入密码</small>
      <button
        type="button"
        onclick="login()"
        class="btn btn-primary btn-lg btn-block mt-4"
      >
        登录
      </button>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function login() {
      $.ajax({
        type: "post",
        url: "/users/login",
        data: {
          username: $("#username").val(),
          password: $("#password").val(),
        },
        success: function (response) {
          if (response == 1) {
            window.location.href = "../index.html";
          } else {
            console.log("登录失败");
          }
        },
      });
    }
  </script>
</html>
